<!DOCTYPE html>
<html>
<head>
<TITLE>PRODUCER PROFILE - PROTOTYPE</TITLE>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script>	$(function() {	$( "#accordion" ).accordion({heightStyle: "content"});	
				$( "#accordion" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
				$( "#accordion" ).accordion( "option", "collapsible", true );
	});	
	</script>
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/tables-min.css">
	<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200' rel='stylesheet' type='text/css'>	
	


</head>
<BODY>
<SECTION CLASS="LEFTCOL">
	<h1>Current Producer </h1>
	<div class="tabs shadow producer-height">
    <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Summary & Contact</label>
       <div class="content ">
		
		<div class="LEFTCOL">
			<DIV CLASS="CLEAR">
				<DIV class="grid-1-4 bold">NAME:</DIV>
				<DIV class="grid-1-4">RASHEED H ALI</DIV>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">SSN:</div>
				<div class="grid-1-4 ">555-5-5555</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">USER ID:</div>
				<div class="grid-1-4 ">9357</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">WEB STATUS:</div>
				<div class="grid-1-4 ">ACTIVE</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">MASTER ID:</div>
				<div class="grid-1-4 ">123456ALP</div>
			</DIV>		
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">EMAIL ADDRESS</div>
				<div class="grid-1-4">RASHEED.ALI@PHOENIXWM.COM</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">CONTACT NAME</div>
				<div class="grid-1-4">N/A</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">CONTACT PHONE</div>
				<div class="grid-1-4">N/A</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">CONTACT EMAIL</div>
				<div class="grid-1-4">N/A</div>
			</DIV>			
		</div>
		<div class="RIGHTCOL">
			<DIV CLASS="CLEAR">
				<div class="grid-1-3 bold">ADDRESS</div>
				<div class="grid-2-3">One American Row <br>PO Box 5056 <br> Hartford, CT 06102-5056</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-3 bold">PHONE</div>
				<div class="grid-2-3">8604035499</div>
			</DIV>
			
		</div>
		
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Contracting</label>
       
       <div class="content">
		<div class="LEFTCOL">
			<DIV CLASS="CLEAR">
				<DIV class="grid-1-4 bold">AML Training:</DIV>
				<DIV class="grid-1-4">xxx</DIV>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">AML Expirary Date:</div>
				<div class="grid-1-4 ">xxx</div>
			</DIV>
				
		</div>
		<div class="RIGHTCOL">
			<DIV CLASS="CLEAR">
				<div class=" bold">State Appointments :</div>
				<div class="grid-1-4 ">
					xxx<br>
					yyy<br>
					ttt<br>
				</div>
			</DIV>

		</div>
		<br>
		<DIV class="CLEAR">
		<h3>Suitability Training</h3>
		<table class="pure-table pure-table-horizontal">
		
			<thead>
				<tr>
					<th>#</th>
					<th>Course</th>
					<th>Status</th>
					<th>Expirary Date</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>1</td>
					<td>Honda Dealership of Hartford Connecticut</td>
					<td>Accord</td>
					<td>2009</td>
				</tr>

				<tr>
					<td>2</td>
					<td>Toyota</td>
					<td>Camry</td>
					<td>2012</td>
				</tr>

				<tr>
					<td>3</td>
					<td>Hyundai</td>
					<td>Elantra</td>
					<td>2010</td>
				</tr>
			</tbody>
		</table>
		</DIV>
		
       
       </div> 
   </div>
    
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Hierarchy High Level</label>
     
       <div class="content">
           <DIV class="CLEAR">
		
		<table class="pure-table pure-table-horizontal">
		
			<thead>
				<tr>
					<th>Distributor Name</th>
				</tr>
			</thead>

			<tbody>
				<tr>

					<td>Honda</td>
				</tr>

				<tr>
					<td>Camry</td>
				</tr>

				<tr>
					<td>Hyundai</td>
				</tr>
			</tbody>
		</table>
		</DIV>
       </div> 
   </div>
   <br class="CLEAR">
   </DIV>
   <h1>Selected Producer</h1>
   <DIV CLASS="shadow">
		<div id="accordion" style="margin: 25px 0;">
			<h3>Producer Detail</h3>
			<div>
			<p>
			Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
			ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
			amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
			odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
			</p>
			</div>
			<h3>Products</h3>
			<div>
			<p>
			Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
			purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
			velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
			suscipit faucibus urna.
			</p>
			</div>
			<h3>Statistics</h3>
			<div>

			Number of other producer codes
			Number of active policies
			Number of subordinate producers
			Number of producers in hierarchy above
			Number of active policies 
<DIV CLASS="CLEAR">
				<DIV class="grid-1-4 bold">NAME:</DIV>
				<DIV class="grid-1-4">RASHEED H ALI</DIV>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">SSN:</div>
				<div class="grid-1-4 ">555-5-5555</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">USER ID:</div>
				<div class="grid-1-4 ">9357</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">WEB STATUS:</div>
				<div class="grid-1-4 ">ACTIVE</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">MASTER ID:</div>
				<div class="grid-1-4 ">123456ALP</div>
			</DIV>		
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">EMAIL ADDRESS</div>
				<div class="grid-1-4">RASHEED.ALI@PHOENIXWM.COM</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">CONTACT NAME</div>
				<div class="grid-1-4">N/A</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">CONTACT PHONE</div>
				<div class="grid-1-4">N/A</div>
			</DIV>
			<DIV CLASS="CLEAR">
				<div class="grid-1-4 bold">CONTACT EMAIL</div>
				<div class="grid-1-4">N/A</div>
			</DIV>
			</div>
			
			</div>
	</DIV>    
</SECTION>

<SECTION CLASS="RIGHTCOL ">
	<h1>Distribution Hierarchies </h1>
	<div class="tabs shadow hierachies-height">
    <div class="tab">
       <input type="radio" id="tab-a" name="tab-group-2" checked>
       <label for="tab-a">EDWARD JONES</label>
       
       <div class="content2 ">
           
		   
		   
			<div >
			<br><br>
				<ul id="primaryNav" class="col1">
					<li id="home"><a href="http://sitetitle.com">EDWARD JONES</a></li>
					<ul>
							<li><a href="/services/design">Graphic Design</a></li>
							<li><a href="/services/development">Web Development</a></li>
							<li><a href="/services/marketing">Internet Marketing</a>
								<ul>
									<li><a href="/social-media">Social Media</a></li>
									<li><a href="/optimization">Search Optimization</a></li>
									<li><a href="/adwords">Google AdWords</a></li>
								</ul>
							</li>
							<li><a href="/services/copywriting">Copywriting</a></li>
							<li><a href="/services/photography">Photography</a></li>
						</ul>
					</li>	
				</ul>
			</div>
	
	
	
	
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-b" name="tab-group-2">
       <label for="tab-b">JP MORGAN</label>
       
       <div class="content2">
			<div >
				<br><br>
				<ul id="primaryNav" class="col1">
					<li id="home"><a href="http://sitetitle.com">JP MORGAN</a></li>
								<li><a href="/services">Services</a>
						<ul>
							<li><a href="/services/design">Graphic Design</a></li>
							<li><a href="/services/development">Web Development</a></li>
							<li><a href="/services/marketing">Internet Marketing</a>
							<li><a href="/services/development">Web Development</a></li>
							<li><a href="/services/marketing">Internet Marketing</a>
								<ul>
									<li><a href="/social-media">Social Media</a></li>
									<li><a href="/optimization">Search Optimization</a></li>
									<li><a href="/adwords">Google AdWords</a></li>
								</ul>
							</li>
							<li><a href="/services/copywriting">Copywriting</a></li>
							<li><a href="/services/photography">Photography</a></li>
						</ul>
					</li>	
				</ul>
			</div>
		   </div> 
	</div>
    
    <div class="tab">
       <input type="radio" id="tab-c" name="tab-group-2">
       <label for="tab-c">SAYBRUS</label>
     
       <div class="content2">
        <div >
	<br><br>
		<ul id="primaryNav" class="col1">
			<li id="home"><a href="http://sitetitle.com">SAYBRUS</a></li>
						<li><a href="/services">Services</a>
				<ul>
					<li><a href="/services/design">Graphic Design</a></li>
					
						<ul>
							<li><a href="/social-media">Social Media</a></li>
							<li><a href="/optimization">Search Optimization</a></li>
							<li><a href="/adwords">Google AdWords</a></li>
						</ul>
					</li>
					<li><a href="/services/copywriting">Copywriting</a></li>
					<li><a href="/services/photography">Photography</a></li>
				</ul>
			</li>	
		</ul>
	</div>
       </div> 
   </div>
   
   </DIV>
   
</SECTION>
<BODY>
</html>